<template>
  <view class="container">
    <custom-nav leftIcon="home" v-if="share_user_id"></custom-nav>
    <custom-nav theme="primary" v-else></custom-nav>
    <view class="content">
      <uv-skeletons :loading="isLoading" :skeleton="skeleton" animate>

        <info-card :info="infoData"></info-card>

        <view class="details-con">
          <view class="d-card" v-for="(item, index) in infoConf" :key="index">
            <view class="d-title" :style="{color: item.color}">{{item.title}}</view>
            <template v-if="item.options">
              <view class="d-con" v-for="(v, i) in item.options" :key="i">
                <template v-if="infoData[v.prop]">
                  <view class="d-label">{{v.label}}</view>
                  <view class="d-text">{{infoData[v.prop]}}</view>
                </template>
              </view>
            </template>
            <view class="d-text" v-else>{{infoData[item.prop]}}</view>
          </view>
        </view>

        <view class="details-parents">
          <image :src="infoData.pic || defaultImg" mode="scaleToFill" class="d-img" />

          <view class="p-member">
            <view class="p-name">
              <text>{{infoData?.surname || ''}}家长</text><text v-if="infoData?.relation">({{infoData?.relation}})</text>
              <image :src="vipImg" mode="scaleToFill" class="p-vip" v-if="infoData.member?.title"></image>
            </view>
            <view class="p-phone">联系方式 {{infoData?.phone}}</view>
          </view>
        </view>

        <view class="details-tips">
          <image src="@/static/common/tips.svg" mode="scaleToFill" class="d-tips-img" />
          <view>完美繁花提示：相亲过程中谨防投资理财等诈骗行为</view>
        </view>
      </uv-skeletons>
    </view>

    <view class="details-bottom" v-if="!isLoading">
      <custom-btn class="d-btn" :style="item.style" @click="item.handleFn" v-for="(item, index) in btns" :key="index">
        <template #icon v-if="index == 0">
          <uni-icons type="heart-filled" size="24" color="#ff5c55" v-if="infoData.collect"></uni-icons>
          <uni-icons type="heart" size="24" color="#ff5c55" v-else></uni-icons>
        </template>
        {{ item.label }}
      </custom-btn>
    </view>
  </view>
</template>

<script setup>
import InfoCard from "./components/info-card.vue";
import vipIcon1 from "@/static/common/vip-jd.svg";
import vipIcon2 from "@/static/common/vip-nd.svg";
import vipIcon3 from "@/static/common/vip-yj.svg";
import vipIcon4 from "@/static/common/vip-zz.svg";
// 引入config
import { infoConfig } from "./config";
// 引入api
import { fetchIndexDetail } from "@/api";
import { getItem, setItem, getToken } from "@/utils/storage";
import useStore from "@/store";
import defaultImg from "@/static/common/avatar.svg";

const { app, common, person } = useStore();
const infoConf = reactive(infoConfig);
const infoData = reactive({});
const share_user_id = ref("");
const mobileStyle = reactive({
  color: "#fff",
  background: "linear-gradient( 180deg, rgba(241,55,64,0.9) 0%, #F13740 100%)",
});
const btns = computed(() => {
  const { collect, surname } = infoData;
  let likeStyle = {};
  if (collect) {
    likeStyle = {
      color: "#ff5c55",
      background: "rgba(255,92,85,0.1)",
    };
  } else {
    likeStyle = {
      color: "#ff5c55",
    };
  }
  return [
    {
      id: 1,
      label: collect == 1 ? "已收藏" : "收藏",
      handleFn: () => {
        handleFavor();
      },
      style: likeStyle,
    },
    {
      id: 2,
      label: "联系" + (surname || "") + "家长",
      handleFn: () => {
        handleParents();
      },
      style: mobileStyle,
    },
  ];
});

const vipConfs = shallowReactive({
  季度会员: vipIcon1,
  年度会员: vipIcon2,
  永久会员: vipIcon3,
  至尊会员: vipIcon4,
});

const vipImg = computed(() => {
  const { title } = infoData?.member || {};
  return vipConfs[title];
});

const isLoading = ref(true);
const skeleton = reactive([
  {
    type: "custom",
    num: 2,
    style: ["margin:0 24rpx;width:700rpx;height:20vh;border-radius:30rpx;", "margin:0 24rpx;width:700rpx;height:78vh;border-radius:30rpx;"],
  },
]);

// 获取详情
const getInfo = async () => {
  try {
    const { user_id } = getItem("userIds") || {};
    const id = share_user_id.value || user_id;
    const { data } = await fetchIndexDetail({ id });
    isLoading.value = false;
    const { base, collect, member, look, img } = data;
    base.hometown = (base.old_province || "") + (base.old_city || "");
    if (base.mate_address) {
      const address = JSON.parse(base.mate_address);
      base.mate_address = address.map((v) => v.city).join(",");
    } else {
      base.mate_address = base.at_city;
    }
    for (const key in base) {
      if (key == "year") {
        if (base.year) base.year = String(base.year).slice(-2);
      }
      infoData[key] = base[key];
    }
    infoData.collect = collect;
    infoData.look = look;
    infoData.member = member;
    infoData.imgs = img.slice(0, 3);

    if (infoData.gender == "男") {
      infoConf[0].color = "#4A61FF";
      infoConf[2].color = "#FF5C55";
    } else {
      infoConf[0].color = "#FF5C55";
      infoConf[2].color = "#4A61FF";
    }
  } catch (error) {
    isLoading.value = false;
  }
};

// 收藏
const handleFavor = () => {
  const { id: s_user_id, collect, look } = infoData;

  person.updateCollect({ s_user_id, collect }).then((res) => {
    if (collect) {
      infoData.collect = 0;
    } else {
      infoData.collect = 1;
    }
    person.updatePersonId({
      user_id: s_user_id,
      collect: infoData.collect,
      look,
    });
    uni.showToast({
      title: res,
      icon: "none",
    });
  });
};

// 判定是否暂停相亲
const isPauseFn = () => {
  const { status } = getItem("user_info") || {};
  return status && status == 1;
};

// 联系家长 - 查看电话
const handleParents = () => {
  if (isPauseFn()) {
    common.updatePopupOpen(true, "submit");
    return;
  }
  person.updateFullPhone("");
  const { id, look } = infoData;
  if (look) {
    person.getPhone(id);
    hasPhone();
    return;
  }

  app.fetchAllnum().then((res) => {
    const { ci_num, member_num, allnum, advnum } = res;
    if (!allnum || allnum == 0) {
      uni.showToast({
        title: "今日解锁资料已达上限",
        icon: "none",
      });
      return;
    }
    if (ci_num || member_num) {
      hasPhone(res);
    } else {
      hasNoPhone(advnum);
    }
  });
};

// 已解锁 - 获取手机号
const hasPhone = (lookObj) => {
  const { id, year, surname, gender, edu, at_province, at_city, phone, look } = infoData;
  const gObj = {
    男: "儿子",
    女: "女儿",
  };
  String(year).substring(2);
  const childInfo = [year + "年", gObj[gender], edu, `${at_province}${at_city}`].join("/");
  const data = {
    id,
    name: surname || "",
    childInfo,
    phone,
    lookObj,
    look,
  };
  common.updateContactParams(data);
  common.updatePopupOpen(true, "contact");
};

// 未解锁 - 无次数
const hasNoPhone = (advnum) => {
  const data = { isNoNum: true, advnum };
  common.updatePromptParams(data);
  common.updatePopupOpen(true, "prompt");
};

// 更新解锁状态
const refreshFn = (id, look) => {
  infoData.look = look;
};

onShow(() => {
  const { user_id, look } = getItem("userIds") || {};
  refreshFn(user_id, look);
});

onLoad(({ id }) => {
  const token = getToken();
  if (!token) {
    uni.reLaunch({ url: "/pages/launch/index" });
    return;
  }
  share_user_id.value = id;
  getInfo();

  // 创建激励视频广告
  common.initAdCase("details");
});

onUnload(() => {
  const { id: user_id, collect, look } = infoData;
  const ids = { user_id, collect, look };
  person.updatePersonId(ids);
  setItem("lastPage", "subPages/details/index");
});
provide("pageType", "details");
provide("refreshFn", refreshFn);
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.container {
  background: #f5f5f5;
  .content {
    background: transparent;
    padding-bottom: 100rpx;
  }
}

.details-con {
  background: #fff;
  border-radius: 30rpx;
  padding: 40rpx 30rpx;
  margin: 0 20rpx;
  .d-card {
    padding: 40rpx 0;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      padding-bottom: 0;
    }
  }
  .d-card + .d-card {
    border-top: 1rpx solid #e9e9e9;
  }
  .d-title {
    font-weight: bold;
    font-size: 36rpx;
    padding-bottom: 20rpx;
  }
  .d-con {
    display: flex;
    align-items: center;
  }
  .d-label {
    font-weight: 600;
    font-size: 36rpx;
    color: #999;
    margin-right: 20rpx;
  }
  .d-text {
    color: #333;
    line-height: 60rpx;
    font-size: 36rpx;
    font-weight: 800;
  }
}

.details-parents {
  margin: 20rpx 20rpx 0;
  padding: 30rpx;
  background: linear-gradient(90deg, #ffeada 0%, #ffd1b9 100%);
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  color: #783c00;
  .p-vip {
    width: 150rpx;
    height: 48rpx;
    margin-left: 10rpx;
  }
  .d-img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
    border-radius: 100rpx;
  }
  .p-name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 36rpx;
    margin-bottom: 10rpx;
  }
  .p-phone {
    font-weight: 500;
    font-size: 28rpx;
  }
}

.details-tips {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 24rpx;
  padding-right: 10rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #999;
  margin: 20rpx;
  .d-tips-img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
  }
}

.details-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  padding-bottom: 72rpx;
  background: #fff;
  box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
  position: relative;
  .d-btn {
    width: 330rpx;
    height: 100rpx;
    font-size: 32rpx;
    line-height: 100rpx;
    font-weight: 600;
    border-radius: 120rpx;
    border: 2rpx solid #f65952;
  }
}
</style>